<!--
通过动态路径参数（params 或 query）来匹配和渲染不同内容的路由规则。在 Vue Router 中，动态路由的路径定义中包含占位符（:）表示动态参数
-->
<template>
  <div id="wrap">
    <h1>动态路由</h1>
    <RouterLink :to="{ name: 'StuDemo55Son1', params: { id: '1' } }">子路由1</RouterLink>
    <RouterLink :to="{ name: 'StuDemo55Son1', params: { id: '2' } }">子路由2</RouterLink>
    <RouterLink :to="{ name: 'StuDemo55Son1', params: { id: '3' } }">子路由3</RouterLink>
    <RouterView></RouterView>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo55',
};
</script>

<script lang="ts" setup>
// import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query);
console.log(route.params);
</script>

<style lang="scss"></style>
